<template>
  <div class="setting">
      <headnav></headnav>
      <div class="main">
         <h3><i class="el-icon-back" @click="back"></i>&ensp;{{name}}</h3>
           <el-button-group class="btngroup">
            <el-button type="primary" icon="el-icon-plus" @click="addfiled()" >新增字段</el-button>
            
            <!-- <el-button type="primary" icon="el-icon-plus" @click="addlogger()" >新增记录</el-button> -->
          </el-button-group>
          <el-row>
            <el-col :span="24">
              <el-table
            border
            size="mini"
            :data="tableData"
            class="table1"
            :header-cell-style="rowClass"
            style="width: 100%">
             <el-table-column 
              label="新增字段"
              align="center"
              >
               <el-table-column
              prop="sourceTableName"
              label="字段中文名"
              align="center"
              width="200">
              <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.sourceTableName" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.sourceTableName }}</span>
              </template>
            </template>
            </el-table-column>
            <el-table-column
              prop="sourceTableCode"
              label="字段英文名"
              align="center"
              >
              <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.sourceTableCode" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.sourceTableCode }}</span>
              </template>
            </template>
            </el-table-column>
            <el-table-column
              prop="sourceType"
              label="字段类型"
              align="center"
              >
              <template slot-scope="scope">
              <template v-if="scope.row.is_edit">
                <el-input size="small" v-model="scope.row.sourceType" ></el-input>
              </template>
              <template v-else>
                <span >{{ scope.row.sourceType }}</span>
              </template>
            </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              >
              <template slot-scope="scope">
                <!-- <el-button @click="scope.row.is_edit = true" type="text" size="small" v-if="scope.row.is_edit==false">编辑</el-button> -->
                 <el-button v-if="scope.row.is_edit" @click="addsource(scope.row)" type="text" size="small">添加来源</el-button>
                 
                <!-- <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table-column>
          </el-table>
            </el-col>
            <el-col :span="8">
              
            </el-col>
          </el-row>
           <el-table
            border
            size="mini"
            :data="tableData3"
            :header-cell-style="rowClass3"
            style="width: 100%">
             <el-table-column 
             type="index"
             align="center"
              label="序号"
              width="50">
          </el-table-column>
          <el-table-column 
              label="目标表"
              align="center"
              >
              <el-table-column 
                prop="goalFiledName"
                  label="字段中文名"
                  width="120">
                  
              </el-table-column>
              <el-table-column 
                prop="goalFiledCode"
                  label="字段英文名"
                  align="center"
                  width="120">
                  
              </el-table-column>
              <el-table-column 
                prop="goalFiledType"
                  label="字段类型"
                  align="center"
                  width="120">
                  
              </el-table-column>
              <el-table-column 
                prop="sourceFiled"
                  label="来源"
                  align="center"
                  >
                  
              </el-table-column>
          </el-table-column>
            <el-table-column
              label="操作"
               width="120"
              align="center"
              >
              <template slot-scope="scope">
                 <el-button @click="deleteRow2(scope.row.id)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteRow2(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
            
          </el-table>
          
          <div class="btnsunb">
            <el-button type="primary">提交</el-button>
          </div>
      </div>
      <el-dialog title="选择源表字段" :visible.sync="isSounrceFiled" class="addDialog">
            <el-form :model="ruleForm" :inline="true">
              <el-form-item  label="数据源">
                 <el-select v-model="ruleForm.dbname" @change="selectdb(ruleForm.dbname)"  placeholder="请选择数据库">
                  <el-option
                    v-for="item in dbdatalist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item  label="数据表">
                 <el-select v-model="ruleForm.sheetname" @change="selectsheet(ruleForm.sheetname)"  placeholder="请选择数据表">
                  <el-option
                    v-for="item in sheets"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-table
          :data="tablefieds"
          @selection-change="changelist"
          style="width: 100%">
          <el-table-column
          label="源表字段"
          align="center"
          >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="filedName"
              label="源表字段"
              width="150">
            </el-table-column>
            <el-table-column
              prop="filedType"
              label="字段类型"
              width="150">
            </el-table-column>
            <el-table-column
              prop="filedComment"
              label="字段注释">
            </el-table-column>
          </el-table-column>
        </el-table>
          <div class="save">
            <el-button type="primary"  @click="addsourcefileds" >保存</el-button>
          </div>
        <el-table
          :data="savefileds"
          style="width: 100%">
          <el-table-column
          label="所选字段"
          align="center"
          >
          <el-table-column
              prop="dbname"
              label="源数据库"
              width="120">
            </el-table-column>
            <el-table-column
              prop="sheetname"
              label="源表表名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="filedName"
              label="源表字段"
              width="120">
            </el-table-column>
            <el-table-column
              prop="filedType"
              label="字段类型"
              width="80">
            </el-table-column>
            <el-table-column
              prop="filedComment"
              label="字段注释">
            </el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                
                <el-button @click="deleteRow(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
            
          </el-table-column>
        </el-table>
        
        
          <div class="save">
            <el-button type="primary"  @click="finish" >完成</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import headnav from '@/components/HeadNav'
export default {
  name: 'DecSetting',
   components:{
    headnav
  },
   data () {
        return {
          isEdit:false,
          spanArr:[],
          pos:0,
          isSounrceFiled:false,
          dbdatalist:[
            {
              value: 'sourceAlias',
              label: 'sourceAlias'
            }, {
              value: 'houseid',
              label: 'houseid'
            }
          ],
           sheets:[
            {
              value: 'detail',
              label: 'detail'
            }, {
              value: 'hede',
              label: 'hede'
            }
          ],
          ruleForm:{
            dbname:'',
            sheetname:'',
            sourceAlias:""
          },
          tablefieds:[],
          savefileds:[],
          savedata:[],
            name:"",
            tableData: [{
            id:0,
            sourceTableCode: '',
            is_edit:true,
            sourceTableName: '',
            sourceType:"",
          }],
          tableData2: [{
            id:0,
            step:"步骤1",
            relCondition: '',
            is_edit:true,
          }, ],

          tableData3:[
            // {
            //   id:0,
            //   goalFiledName: '',
            //   goalFiledCode: '',
            //   goalFiledType: '',
            //   sourceFiled: '',
            //   is_edit:true,
            // },
          ],
          
        }
    },
    mounted(){
        console.log(this.$route.query.title);
        if(this.$route.query.handle=="edit"){
          this.isEdit=true;
          this.tableData=this.tableData4
          this.tableData2=this.tableData5
          this.tableData3=this.tableData6
        }
        this.name=this.$route.query.title;
    },
   
    methods:{
        changelist(selection){
         console.log(selection);
          // this.savedata=[];
          this.savedata=selection;
        },
        saveSetting(item,fileds){
         
          console.log(item,fileds);
          let str='';
          for(var i=0;i<fileds.length;i++){
            str+=fileds[i].dbname;
            str+='-';
            str+=fileds[i].sheetname;
            str+='-';
            str+=fileds[i].filedName;
            if(i<fileds.length-1){
              str+='&&';
            }
            
          }
          let sources=str;
          item.is_edit=false;
          this.tableData3.push({
            goalFiledName: item.sourceTableName,
            goalFiledCode: item.sourceTableCode,
            goalFiledType: item.sourceType,
            sourceFiled: sources,
          })
        },
        addfiled(){
          this.tableData[0]=
            {
            sourceTableCode: '',
            is_edit:true,
            sourceTableName: '',
            sourceFilter:''
          }
        },
        //添加源表数据
        addsourcefileds(){
          
          this.savedata.forEach(item=>{
            item.sheetname=this.ruleForm.sheetname
            item.dbname=this.ruleForm.dbname
          })
          this.ruleForm.dbname="";
          this.ruleForm.sheetname='';
          this.savefileds=this.savefileds.concat(this.savedata)
        },
        addsource(){
          this.savefileds=[];
          this.tablefieds=[];
          this.isSounrceFiled=true;
          
        },
        selectdb(){

        },
        selectsheet(){
          this.tablefieds=[
            {
              filedName:"sd",
              filedType:"int",
              filedComment:"",
            },
            {
              filedName:"name",
              filedType:"string",
              filedComment:"",
            },
          ]
        },
        addrelative(){
          let id=this.tableData2.length;
          let step='步骤'+(this.tableData2.length+1)
          this.tableData2.push({
              id:id,
              step:step,
            relCondition: '',
            is_edit:true,
          })
        },
        addlogger(){
          let id=this.tableData3.length
          this.tableData3.push({
              id:id,
            goalFiledName: '',
              goalFiledCode: '',
              goalFiledType: '',
              sourceTableAlias: '',
              sourceFiledCode: '',
              filedProcess: '',
              updateBy: '',
              updateTm: '',
              updateNum: '',
              updateDesc: '',
              is_edit:true,
              
          })
        },
        deleteRow: function(id) {
				//提交，成功后,更新数据
				//  alert(index1);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
          for(var i = 0; i < this.tableData.length; i++) {
							if(this.tableData[i].id == id) {
								this.tableData.splice(i, 1);
							}
						}
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
				
      },
      deleteRow1: function(id) {
				//提交，成功后,更新数据
				//  alert(index1);
				console.log(id);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
          for(var i = 0; i < this.tableData2.length; i++) {
							if(this.tableData2[i].id == id) {
								this.tableData2.splice(i, 1);
							}
						}
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
				
      },
      finish(){
        this.isSounrceFiled=false;
        let item=this.tableData[0],fileds=this.savefileds;
        this.tableData[0].is_edit=false;
        console.log(item,fileds);
          let str='';
          for(var i=0;i<fileds.length;i++){
            str+=fileds[i].dbname;
            str+='-';
            str+=fileds[i].sheetname;
            str+='-';
            str+=fileds[i].filedName;
            if(i<fileds.length-1){
              str+='&&';
            }
            
          }
          let sources=str;
          item.is_edit=false;
          this.tableData3.push({
            goalFiledName: item.sourceTableName,
            goalFiledCode: item.sourceTableCode,
            goalFiledType: item.sourceType,
            sourceFiled: sources,
          })
           this.tableData[0]=
            {
            sourceTableCode: '',
            is_edit:true,
            sourceTableName: '',
            sourceFilter:''
          }
      },
      rowClass({ row, rowIndex}) {
        console.log(rowIndex) //表头行标号为0
        return 'background: #409EFF;border-color:"#ddd";color: white;'
      },
      rowClass2({ row, rowIndex}) {
        console.log(rowIndex) //表头行标号为0
        return 'background: #67C23A;color: white;'
      },
      rowClass3({ row, rowIndex}) {
        console.log(rowIndex) //表头行标号为0
        return 'background: #E6A23C;color: white;'
      },
      deleteRow2: function(id) {
				//提交，成功后,更新数据
				//  alert(index1);
				console.log(id);
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
          for(var i = 0; i < this.tableData3.length; i++) {
							if(this.tableData3[i].id == id) {
								this.tableData3.splice(i, 1);
							}
						}
				}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
				});
				
			},
        back(){
          console.log(this.$store.state.formType.conType)
          this.$store.commit('changetab',{isSuccess:true,tabindex:1});
            this.$router.push({path:"/dataModel",query:{activenavIndex:'2'}})
        },
        onSubmit(){

        },
    }
}
</script>

<style scoped>
.main{
  padding: 8px;
}
.btnsunb{
  text-align: center;
  padding: 10px;
}
.btngroup{
  padding: 8px 0px;
}
.main .el-input .el-input__inner{
  height: 30px!important;
  line-height: 30px!important;
}
.table1 th{

}
.save{
  padding: 8px;
  text-align: center
}
</style>